<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['围栏管理','围栏绑定[卸货绑定]']" icon="fa fa-map-marker" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>

	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>围栏绑定-卸货</h2></header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn">
								<div class="top_module">
									<span class="module_text">公司名称</span>
									<div class="company_tree" style="display: inline-block;vertical-align: middle;">
										<div class="clearfix" style="position: relative;">
											<div class="s_hover_box s_fix_radius">
												<input class="form-control tree_company_input" id="company" name="selectedCompanyName" (input)="companySearch()" autocomplete="off" [(ngModel)]='selectedCompanyName' (click)="companyClick()" type="text" placeholder="请选择或输入关键字" />
												<div class="s_del_icon" (click)='delText()'>x</div>
											</div>
											<div class="s_tree_box" id="tree_box">
												<div class="vision_tree" id="vision_tree">
													<div id="tree"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="top_module" >
									<span class="module_text">围栏名称</span>
									<input  class="module_inp"  type="text" style="padding-left: 12px;"  [(ngModel)]="railName" placeholder=" 围栏名称..."  />
								</div>

								<button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
								<button type="button" class="btn btn-primary" (click)="addRail()">添加</button>

							</div>
						</div>
						<div class="table_scroll">
							<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
								<thead>
									<tr>
										<th>围栏名称</th>
										<th>围栏类型</th>
										<th>范围[米]</th>
										<th>绑定车辆数</th>
										<th>所属公司</th>
										<th>最后修改时间</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i"   >
										<td>{{row.name}}</td>
										<td>
											<span *ngIf="row.typeId == '2'">卸货点</span>
										</td>
										<td>
											<span *ngIf='row.radius>0'>{{row.radius}}</span>
											<span *ngIf='row.radius<1'> 多边形</span>
										</td>
										<td>
											<span>{{row.bindCarCountNumber}}</span>
											<button *ngIf="row.bindCarCountNumber" (click)="carBindDetail(row,carBindModal)">查看</button>
										</td>
										<td>{{row.companyEntity.companyName}}</td>
										<td>{{row.uploadTime}}</td>
										<td>
											<button type="button"  (click)="mapModalOpen(row,mapModal)"> 查看围栏</button>
											<button type="button"  (click)="bindCars(row)"> 绑定车辆</button>
											<!--<button type="button"  (click)="deleteRow(row.id)"> 删除</button>-->
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1" (onPageChange)="paginate($event)">
							</paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>
	
	<div bsModal #mapModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content" style="min-width: 800px;">
				<div class="modal-header">
					<button type="button" class="close" (click)="mapModalClose(mapModal)" aria-label="Close">
	            <span aria-hidden="true">&times;</span>
	          </button>
					<h4 *ngIf="selectRowData" class="modal-title">围栏{{selectRowData.name}}所在位置</h4>
				</div>
				<div class="modal-body" style="padding: 0;">
					<div id="baiduMap" style="width: 798px;height: 600px;"></div>
				</div>
			</div>
		</div>
	</div>
	
	<!--围栏绑定车辆详情      弹窗-->
	<section bsModal #carBindModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" (click)="closeCarBind(carBindModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">绑定车辆详情</h4>
				</div>
				<div class="modal-body" style="height: 280px;overflow: auto;">
					<div class="row form-horizontal">
						<div class="table_scroll">
							<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
								<thead>
									<tr>
										<th>车牌号码</th>
										<th>设备ID</th>
										<th>所属公司</th>
										<th>车辆用途</th>
										<th>用途类型</th>
									</tr>
								</thead>
								<tbody>
									<tr *ngFor="let row of carBindList; let i = index" [attr.data-index]="i"   >
										<td>{{row.carNumber}}</td>
										<td>{{row.deviceId}}</td>
										<td>{{row.parentName}}</td>
										<td>{{row.useTypeL1}}</td>
										<td>{{row.useTypeL2}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="modal-footer"></div>
			</div>
		</div>
	</section>
	<!-- 围栏绑定车辆详情     弹窗-->
</div>